<template>
  <div class="user-edit-container">
    <!-- Header 区域 -->
    <van-nav-bar
      title="编辑资料"
      left-arrow
      @click-left="$router.back()"
      fixed
    />
    <!-- 用户资料 -->
    <van-cell-group class="action-card">
      <van-cell title="头像" is-link center @click="fileFn">
        <template #default>
          <van-image round class="avatar" :src="$store.state.headerImgUrl" />
          <!-- file 选择框 -->
          <input
            type="file"
            ref="iptFile"
            v-show="false"
            accept="image/*"
            @change="changeFileFn"
          />
        </template>
      </van-cell>
      <van-cell
        title="名称"
        is-link
        :value="userObj.name"
        @click="showDialogFn"
      />
      <van-cell
        title="性别"
        is-link
        :value="
          userObj.gender === 1 ? '男' : userObj.gender === 0 ? '钕 ' : '保密'
        "
      />
      <van-cell
        title="生日"
        is-link
        :value="userObj.birthday"
        @click="birthdayFn"
      />
    </van-cell-group>
    <!-- 修改用户名称的对话框 -->
    <van-dialog
      v-model="show"
      title="标题"
      show-cancel-button
      :before-close="beforCloseFn"
    >
      <input type="text" v-fofo v-model="userName" />
    </van-dialog>
    <!-- 生日组件 -->
    <!-- 修改时间,底部弹出层 -->
    <van-popup
      v-model="isShowBirth"
      position="bottom"
      style="height: 50%"
      round
    >
      <van-datetime-picker
        v-model="currentDate"
        v-show="isShowBirth"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="birthdayConfirmFn"
      />
    </van-popup>
  </div>
</template>

<script>
// 引入
import { getUserEditAPI, uploadHeadImgAPI, updateUserInfoAPI } from '@/api'
import { Notify } from 'vant'
import dayjs from 'dayjs'
import { mapMutations } from 'vuex'

// 导出
export default {
  // 函数返回的对象
  data () {
    return {
      userObj: {},
      show: false,
      isShowBirth: false, // 显示时间选择器
      minDate: new Date(1970, 0, 1), // 最小的可选的日期
      maxDate: new Date(), // 最大的可选日期
      currentDate: new Date(), // 当前日期
      userName: '' // 用户修改的姓名
    }
  },
  // 名字
  name: 'UserEdit',
  // 初始化
  async created () {
    const res = await getUserEditAPI()
    // console.log(res)
    this.userObj = res.data.data
  },
  // 方法
  methods: {
    ...mapMutations(['setHeaderImgUrlMutations']),

    // 图片文件上传事件
    fileFn () {
      this.$refs.iptFile.click()
    },
    // 图片更改事件，获取和上传
    async changeFileFn (ev) {
      console.log(ev)
      const formData = new FormData()
      formData.append('photo', ev.target.files[0])
      const res = await uploadHeadImgAPI(formData)
      this.userObj.photo = res.data.data.photo
      this.setHeaderImgUrlMutations(this.userObj.photo)
    },
    // 点击姓名让弹出框出现
    showDialogFn () {
      this.show = true
    },
    // 点击生日显示日期控件
    birthdayFn () {
      // 修改默认日期
      this.currentDate = new Date(this.userObj.birthday)
      this.isShowBirth = true
    },
    // 出生日期确认方法
    async birthdayConfirmFn () {
      // 日期对象转成字符串
      await updateUserInfoAPI({
        birthday: dayjs(this.currentDate).format('YYYY-MM-DD')
      })
      this.isShowBirth = false
      this.userObj.birthday = dayjs(this.currentDate).format('YYYY-MM-DD')
    },
    // 姓名修改，点击确定
    async beforCloseFn (action, done) {
      // console.log(action)
      if (action === 'cancel') {
        done()
      } else {
        if (/^[A-Za-z\u4e00-\u9fa5]{1,7}$/.test(this.userName)) {
          // 通过
          await updateUserInfoAPI({
            Username: this.userName
          })
          this.userObj.name = this.userName
          done()
        } else {
          // 没通过
          done(false)
          Notify({
            type: 'warning',
            message: '姓名只能在1-7位中英文字符'
          })
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
// 编辑
.user-edit-container {
  padding-top: 46px;
  .avatar {
    width: 50px;
    height: 50px;
  }
}
// 弹出层样式，让输入框居中
/deep/ .van-dialog__content {
  text-align: center;
}
// 输入框样式，让内容居中，更改边框样式
/deep/ .van-dialog__content input {
  text-align: center;
  border: none;
  border-bottom: 1px solid #ccc;
  height: 35px;
}
</style>
